import 'package:flutter/material.dart';

class ServiceAreaPage extends StatefulWidget {
  const ServiceAreaPage({super.key});

  @override
  State<ServiceAreaPage> createState() => _ServiceAreaPageState();
}

class _ServiceAreaPageState extends State<ServiceAreaPage> {
  bool _isEditing = false;

  // 模拟已选择的区域数据
  final List<Map<String, dynamic>> _selectedAreas = [
    {
      'name': '朝阳区',
      'color': const Color(0xFFFF5722),
    },
    {
      'name': '海淀区',
      'color': const Color(0xFF2196F3),
    },
    {
      'name': '东城区',
      'color': const Color(0xFF4CAF50),
    },
    {
      'name': '西城区',
      'color': const Color(0xFFFFC107),
    },
  ];

  void _toggleEdit() {
    setState(() {
      _isEditing = !_isEditing;
    });
    
    if (!_isEditing) {
      // 保存区域设置
      ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(
          content: Text('区域设置已保存'),
          behavior: SnackBarBehavior.floating,
        ),
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFFF5F5F5),
      appBar: AppBar(
        title: const Text('服务区域'),
        centerTitle: true,
        backgroundColor: Colors.white,
        elevation: 0,
      ),
      body: Column(
        children: [
          // 当前服务区域
          Container(
            margin: const EdgeInsets.all(16),
            padding: const EdgeInsets.all(16),
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(8),
            ),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Row(
                  children: [
                    const Text(
                      '当前服务区域',
                      style: TextStyle(
                        fontSize: 16,
                        fontWeight: FontWeight.w500,
                      ),
                    ),
                    const Spacer(),
                    Text(
                      '${_selectedAreas.length}个区域',
                      style: TextStyle(
                        fontSize: 13,
                        color: Colors.grey[600],
                      ),
                    ),
                  ],
                ),
                const SizedBox(height: 16),
                Wrap(
                  spacing: 8,
                  runSpacing: 8,
                  children: _selectedAreas.map((area) => _buildAreaTag(
                    area['name'],
                    color: area['color'],
                  )).toList(),
                ),
              ],
            ),
          ),

          // 地图展示
          Expanded(
            child: Container(
              margin: const EdgeInsets.fromLTRB(16, 0, 16, 16),
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(8),
                boxShadow: [
                  BoxShadow(
                    color: Colors.black.withOpacity(0.05),
                    blurRadius: 8,
                    offset: const Offset(0, 2),
                  ),
                ],
              ),
              child: ClipRRect(
                borderRadius: BorderRadius.circular(8),
                child: Stack(
                  children: [
                    // 临时使用占位图
                    Container(
                      color: Colors.grey[100],
                      child: Center(
                        child: Column(
                          mainAxisSize: MainAxisSize.min,
                          children: [
                            Icon(
                              Icons.map_outlined,
                              size: 48,
                              color: Colors.grey[400],
                            ),
                            const SizedBox(height: 16),
                            Text(
                              '地图加载中...',
                              style: TextStyle(
                                color: Colors.grey[600],
                                fontSize: 14,
                              ),
                            ),
                          ],
                        ),
                      ),
                    ),
                    if (_isEditing)
                      Positioned(
                        left: 16,
                        right: 16,
                        bottom: 16,
                        child: Container(
                          padding: const EdgeInsets.all(16),
                          decoration: BoxDecoration(
                            color: Colors.white,
                            borderRadius: BorderRadius.circular(8),
                            boxShadow: [
                              BoxShadow(
                                color: Colors.black.withOpacity(0.1),
                                blurRadius: 8,
                                offset: const Offset(0, 2),
                              ),
                            ],
                          ),
                          child: const Text(
                            '点击地图选择服务区域',
                            textAlign: TextAlign.center,
                            style: TextStyle(
                              fontSize: 14,
                              color: Color(0xFFFF5722),
                            ),
                          ),
                        ),
                      ),
                  ],
                ),
              ),
            ),
          ),
        ],
      ),
      floatingActionButton: FloatingActionButton.extended(
        onPressed: _toggleEdit,
        backgroundColor: _isEditing ? Colors.green : const Color(0xFFFF5722),
        icon: Icon(_isEditing ? Icons.check : Icons.edit_location_alt),
        label: Text(_isEditing ? '保存' : '编辑区域'),
      ),
    );
  }

  Widget _buildAreaTag(String area, {Color? color}) {
    return Container(
      padding: const EdgeInsets.symmetric(
        horizontal: 12,
        vertical: 6,
      ),
      decoration: BoxDecoration(
        color: (color ?? const Color(0xFFFF5722)).withOpacity(0.1),
        borderRadius: BorderRadius.circular(16),
        border: Border.all(
          color: (color ?? const Color(0xFFFF5722)).withOpacity(0.2),
        ),
      ),
      child: Row(
        mainAxisSize: MainAxisSize.min,
        children: [
          Container(
            width: 8,
            height: 8,
            decoration: BoxDecoration(
              color: color ?? const Color(0xFFFF5722),
              shape: BoxShape.circle,
            ),
          ),
          const SizedBox(width: 6),
          Text(
            area,
            style: TextStyle(
              fontSize: 14,
              color: color ?? const Color(0xFFFF5722),
            ),
          ),
        ],
      ),
    );
  }
} 